<template>
    <!-- 总容器 -->
    <div class="wrapper">
        <header>
            <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
            <p>{{reportdate}}体检报告</p>
            <div></div>
        </header>

        <nav>
            <!-- <div class="active">总检结论</div> -->
            <div :class="{ active: currentTab === 'conclusion' }" @click="currentTab = 'conclusion'">
                总检结论
            </div>
            <!-- <div>报告详情</div> -->
            <div :class="{ active: currentTab === 'details' }" @click="currentTab = 'details'">
                报告详情
            </div>
        </nav>

        <div class="top-ban"></div>

        <div class="nav-content-item" v-if="currentTab === 'conclusion'">
            <div class="item">
                <div class="title">异常项</div>
                <ul>
                     <li v-for="(item, index) in abnormalItems" :key="index">
                        <div class="indications">
                            <div class="left">
                                <div>异</div>
                                    <p>{{ item.name }}</p>
                                </div>
                                <div class="right">
                                    <p>{{ item.value }} {{ item.unit }}</p>
                                    <p>正常值范围：{{ item.normalvaluestring }}</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="item">
                <div class="title">一、尊敬的顾客，您本次体检结论如下：</div>
                <ul>
                    <li class="conclusion-title" v-for="(item, index) in overallResults" :key="index">{{ index + 1 }}、{{ item.title }}</li>
                </ul>
            </div>
                <div class="item">
                <div class="title">二、尊敬的顾客，您本次体检建议信息如下：</div>
                <ul>
                    <li class="conclusion-content" v-for="(item, index) in overallResults" :key="index">
                    <h3>{{ index + 1 }}、{{ item.title }}</h3>
                    <p>{{ item.content }}</p>
                    </li>
                </ul>
                </div>
        </div>

        <div class="nav-content-item" v-if="currentTab === 'details'">
            <div v-for="(group, index) in groupedData" :key="index" class="item">
            <div class="title">{{ group.title }}</div>
            <ul>
                <li v-for="item in group.indications" :key="item.cidrid" class="indications">
                <div :class="getIndicationClass(item.ciid)">
                    <div class="left">
                    <div v-if="item.iserror">异</div>
                    <p>{{ item.name }}</p>
                    </div>
                    <div class="right">
                    <p v-if="item.value">{{ item.value }} {{ item.unit }}</p>
                    <p v-if="item.ciid !== 6">正常值范围：{{ item.normalvaluestring }}</p>
                    </div>
                </div>
                </li>
            </ul>
            </div>
        </div>

        <div class="bottom-ban"></div>
        <footer>
            <ul>
                <li @click="()=>{router.push('/hospital')}">
                    <i class="fa fa-home"></i>
                    <p>云医院</p>
                </li>
                <li @click="()=>{router.push('/setmeal')}">
                    <i class="fa fa-opencart"></i>
                    <p>商城</p>
                </li>
                <li @click="()=>{router.push('/index')}">
                    <i class="fa fa-compass"></i>
                    <p>发现</p>
                </li>
                <li @click="()=>{router.push('/personal')}">
                    <i class="fa fa-user"></i>
                    <p>我</p>
                </li>
            </ul>
        </footer>
    </div>
</template>

<script setup>
import router from '@/router';
import axios from 'axios';
import { ref, onMounted, computed } from 'vue';


const currentTab = ref('conclusion');
const reportItem = computed(() => {
  const item = sessionStorage.getItem('reportitem');
  try {
    return JSON.parse(item);
  } catch (error) {
    console.error('Error parsing reportitem from sessionStorage:', error);
    return {};
  }
});
const reportdate = ref('');
reportdate.value = reportItem.value.orderDate;
const orderid = reportItem.value.orderid;

// 抽象出一个公共的请求函数来处理API调用的共通逻辑
const fetchApiData = async (url) => {
  try {
    const response = await axios.get(url);
    if (response.data.code === 200) {
      return response.data.data;
    } else {
      console.error(`API returned code: ${response.data.code}`);
      return [];
    }
  } catch (error) {
    console.error('Error fetching data:', error);
    return [];
  }
};

// 总检
const overallResults = ref([]);
const fetchOverallResults = async () => {
  const url = `http://localhost:9000/report/Overallresult?orderid=${orderid}`;
  overallResults.value = await fetchApiData(url);
};

// 异常
const abnormalItems = ref([]);
const fetchAbnormalItems = async () => {
  const url = `http://localhost:9000/report/Abnormal?orderid=${orderid}`;
  abnormalItems.value = await fetchApiData(url);
};

// 详情
const fetchTitle = async (cid) => {
  const url = `http://localhost:9000/checkitem/getCheckitemName?ciid=${cid}`;
  const title = await fetchApiData(url);
  return title;
};
// 获取指定指标的样式
function getIndicationClass(ciid) {
    return ciid === 6 ? 'indications-type-4' : 'indications';
};
// 获取报告详细数据
const reportData = ref([]);
const fetchReportData = async () => {
  const url = `http://localhost:9000/report/getReportDetails?orderId=${orderid}`;
  reportData.value = await fetchApiData(url);
};
// 使用ciid对数据指标进行分类
const groupedData = ref([]);
async function updateGroupedData() {
  const groups = {};
  for (const item of reportData.value) {
    if (!groups[item.ciid]) {
      const title = await fetchTitle(item.ciid);
      groups[item.ciid] = {
        title,
        indications: []
      };
    }
    groups[item.ciid].indications.push(item);
  }
  groupedData.value = Object.values(groups);
}

onMounted(async () => {
  await fetchAbnormalItems();
  await fetchOverallResults();
  await fetchReportData();
  await updateGroupedData();
});
</script>


<style src="../assets/css/report.css" scoped>
.nav {
  padding-top: 0;
}
</style>